{% extends "base.html" %}

{% block content %}
<nav class="user-settings">
     <ul>
        <li class="current">{% html.anchor "users/settings", "Settings", {"class": "cog"} %}</li>
        <li>{% html.anchor "users/settings/#password", "Password &amp; Email", {"class": "key"} %}</li>
        <li>{% html.anchor "users/settings/#security", "Security", {"class": "lock"} %}</li>
        <li>{% html.anchor "users/accounts", "Accounts", {"class": "user"} %}</li>
    </ul>
    <h2 class="title">Settings</h2>
</nav>

<section>
    <h2>Change Password</h2>

    {{ errors }}

    {% form.open "users/login" %}
    <div class="input text required">
        {% form.label "Old Password", "old_password" %}
        <span class="input">{% form.password "old_password", "", {"id": "old_password", "size": 30} %}</span>
    </div>

    <div class="input password required">
        {% form.label "New Password", "new_password" %}
        <span class="input">{% form.password "new_password", "", {"id": "new_password", "size": 30} %}</span>
        <div class="view-password">
            {% form.label "Show password", "show_password" %}
            {% form.checkbox "show_password", "", {"id": "show_password"} %}
        </div>
    </div>

    <div class="input submit">
        {% form.submit "change", "Update Password" %}
    </div>
    {% form.close %}
</section>
{% endblock %}

{% block jscript %}
<script>
    (function($){
        var password = $("#new_password").password_strength(),
            passwordText = $("<input/>", { id: "password_text", size: 30, type: "text" });

        $("#show_password").click(function() {
            if ($(this).get(0).checked) {
                passwordText.val(password.val());
                password
                    .hide()
                    .after(passwordText.password_strength());
            } else {
                password
                   .val(passwordText.val())
                   .show();
                passwordText.remove();
            }
        });

        var titles = { "username": "Username", "password": "Password", "email": "Email" };
        {% for key, text in errors %}
            $.pnotify({ pnotify_title: titles["{{ key }}"], pnotify_text: "{{ text }}", pnotify_type: "error", pnotify_history: false });
        {% endfor %}
    })(jQuery);
</script>
{% endblock %}
